<template>
    <div class="environmentalMonitoringContent">
        <img src="@/assets/bigScreen/icons/left/moduls_bg.png" alt="">
        <div class="titles_moduls">
            <img src="@/assets/bigScreen/icons/right/hjjc.png" alt="">
            环境监测
        </div>
        <div class="content_box">
            <!-- <img src="@/assets/bigScreen/icons/right/header_img.png" alt=""> -->
            <div class="real_time_temperature">
                <div class="dyc_border">
                    <div class="dec_border">
                        <div class="dsc_border">

                        </div>
                    </div>
                </div>
                <div class="dssc_border">
                    <div class="real_time_temperature_infs">
                        <div class="temperature_t">实时温度</div>
                        <div class="temperature">{{ data.temperature }}</div>
                    </div>
                </div>
            </div>

            <div class="infs_items_box">
                <div class="infs_items_box_item">
                    <img src="@/assets/bigScreen/icons/right/hjjc_bg.png" alt="">
                    <div>
                        PM2.5：<span>{{ data.pm25 }}</span>
                    </div>
                </div>
                <div class="infs_items_box_item">
                    <img src="@/assets/bigScreen/icons/right/hjjc_bg.png" alt="">
                    <div>
                        PM10：<span>{{ data.pm10 }}</span>
                    </div>
                </div>
                <div class="infs_items_box_item">
                    <img src="@/assets/bigScreen/icons/right/hjjc_bg.png" alt="">
                    <div>
                        噪音：<span>{{ data.sound }}</span>
                    </div>
                </div>
                <div class="infs_items_box_item">
                    <img src="@/assets/bigScreen/icons/right/hjjc_bg.png" alt="">
                    <div>
                        风速：<span>{{ data.windSpeed }}</span>
                    </div>
                </div>
                <div class="infs_items_box_item">
                    <img src="@/assets/bigScreen/icons/right/hjjc_bg.png" alt="">
                    <div>
                        空气质量：<span>{{ data.airQuality }}</span>
                    </div>
                </div>
            </div>
        </div>


    </div>
</template>

<script>
import { getEnvironmentalMonitoring } from "@/api/bigScreen/home.js";

export default {
    components: {
    },
    data() {
        return {
            data: {
                airQuality: "优",
                pm10: 57,
                pm25: 27,
                sound: 65,
                temperature: "-15°C",
                windSpeed: "西北风 3级"
            }
        };
    },
    mounted() {
        this.getData()
    },
    methods: {
        getData() {
            getEnvironmentalMonitoring().then(res => {
                if (res.code == 200) {
                    let pm25 = res.data.pm25
                    let pm10 = res.data.pm10
                    res.data.pm25 = pm25 + (
                        pm25 >= 0 && pm25 <= 35 ? "(优)" :
                            pm25 > 35 && pm25 <= 75 ? "(良)" :
                                pm25 > 75 && pm25 <= 115 ? "(轻度污染)" :
                                    pm25 > 115 && pm25 <= 150 ? "(中度污染)" :
                                        pm25 > 150 && pm25 <= 250 ? "(重度污染)" :
                                            pm25 > 250 ? "(严重污染)" : "(未知)"
                    )

                    res.data.pm10 = pm10 + (
                        pm10 >= 0 && pm10 <= 50 ? "(优)" :
                            pm10 > 50 && pm10 <= 150 ? "(良)" :
                                pm10 > 150 && pm10 <= 250 ? "(轻度污染)" :
                                    pm10 > 250 && pm10 <= 350 ? "(中度污染)" :
                                        pm10 > 350 && pm10 <= 420 ? "(重度污染)" :
                                            pm10 > 420 ? "(严重污染)" : "(未知)"
                    )
                    console.log(res.data);

                    this.data = res.data
                }
            })
        },
    },
};
</script>

<style scoped lang="scss">
@font-face {
    font-family: 'kk';
    src: url('../../../../../assets/font/kuaikanshijieti-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'al';
    src: url('../../../../../assets/font/Alibaba-PuHuiTi-Bold_0.ttf');
    font-weight: normal;
    font-style: normal;
}

.environmentalMonitoringContent {
    width: 100%;
    position: relative;

    img {
        width: 100%;
    }


    .titles_moduls {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        position: absolute;
        top: 3%;
        left: 1.5%;

        img {
            width: 1.2vw;
            margin-right: 0.5208vw;
        }


        font-size: 0.8333vw;
        font-weight: 400;
        letter-spacing: 0.0208vw;
        font-family: kk;
        color: transparent;
        background-image: linear-gradient(180deg, rgba(153, 253, 255, 1) 0%, rgba(13, 110, 255, 1) 100%);
        -webkit-background-clip: text;
        background-clip: text;

    }


    .content_box {
        width: 96%;
        height: 11.9792vw;
        position: absolute;
        top: 17%;
        right: 2%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .real_time_temperature {
            width: 10.4167vw;
            height: 10.4167vw;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;

            .real_time_temperature_infs {
                width: 100%; // 保持宽度
                height: 100%; // 保持高度
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                position: absolute;

                .temperature_t {
                    font-size: .625vw;
                    font-weight: 400;
                    color: rgba(255, 255, 255, 1);
                    text-align: center;
                }

                .temperature {
                    font-weight: 400;
                    color: rgba(255, 255, 255, 1);
                    text-align: center;
                    font-size: 0.8292vw;
                    font-family: kk;
                }

            }

            .dssc_border {
                width: 80%;
                height: 80%;
                background: url("../../../../../assets/bigScreen/icons/right/dssc.png");
                background-size: cover;
                position: absolute;
            }

            .dyc_border {
                width: 90%;
                height: 90%;
                background: url("../../../../../assets/bigScreen/icons/right/dyc.png");
                background-size: cover;
                display: flex;
                align-items: center;
                justify-content: center;
                animation: rotate 20s linear infinite;



                .dec_border {
                    width: 85%;
                    height: 85%;
                    background: url("../../../../../assets/bigScreen/icons/right/dec.png");
                    background-size: cover;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    animation: rotateReverse 10s linear infinite;

                    @keyframes rotateReverse {
                        from {
                            transform: rotate(360deg);
                        }

                        to {
                            transform: rotate(0deg);
                        }
                    }

                    .dsc_border {
                        width: 85%;
                        height: 85%;
                        background: url("../../../../../assets/bigScreen/icons/right/dsc.png");
                        background-size: cover;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        animation: rotates 10s linear infinite;

                        @keyframes rotates {
                            from {
                                transform: rotate(0deg);
                            }

                            to {
                                transform: rotate(360deg);
                            }
                        }


                    }

                }

                @keyframes rotate {
                    from {
                        transform: rotate(0deg);
                    }

                    to {
                        transform: rotate(360deg);
                    }
                }


            }
        }

        .infs_items_box {
            width: 55%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;


            &_item {
                width: 100%;
                height: 1.6667vw;
                font-size: 0.7292vw;
                font-weight: 500;
                color: rgba(255, 255, 255, 1);
                position: relative;

                img {
                    width: 100%;
                }

                div {
                    width: 100%;
                    position: absolute;
                    top: 15%;
                    left: 1%;
                    padding-left: 5%;
                }

                span {
                    font-family: kk;
                }
            }
        }
    }

}
</style>